<template>
  <div>
    <ElForm inline>
      <ElFormItem label="请假类型">
        <ElSelect multiple v-model="queryCondition.leaveTypes">
          <ElOption label="病假" value="sick"></ElOption>
          <ElOption label="事假" value="issue"></ElOption>
          <ElOption label="年假" value="annual"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="单据状态">
        <ElSelect multiple v-model="queryCondition.leaveBillStates">
          <ElOption label="待提交" value="toSubmit"></ElOption>
          <ElOption label="待审核" value="toAudit"></ElOption>
          <ElOption label="已审核" value="auditted"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="info" @click="reset()">reset</ElButton>
        <ElButton type="primary" @click="queryByCondition()">Search</ElButton>
        <ElButton type="success" @click="open4insert()">add</ElButton>
      </ElFormItem>
    </ElForm>

    <ElTable :data="results">
      <ElTableColumn type="selection"></ElTableColumn>
      <ElTableColumn label="编号" prop="leaveBillCode"></ElTableColumn>
      <ElTableColumn label="请假类型">
        <template #default="{ row }">
          <template v-for="(e, i) in ltypes" :key="i">
            <span v-if="row.leaveType === e.states">{{ e.text }}</span>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn label="请假原因" prop="reason"></ElTableColumn>
      <!-- <ElTableColumn label="状态" prop="billState"></ElTableColumn> -->
      <!-- <ElTableColumn label="状态">
        <template #default="{ row }">
          <ElTag type="primary" v-if="row.billState == 'toSubmit'">待提交</ElTag>
          <ElTag type="danger" v-if="row.billState == 'toAudit'">待审核</ElTag>
          <ElTag type="success" v-if="row.billState == 'auditted'">已审核</ElTag>
        </template>
      </ElTableColumn> -->
      <ElTableColumn label="状态">
        <template #default="{ row }">
          <template v-for="(e, i) in billtypes" :key="i"
            ><ElTag :type="e.color" v-if="row.billState === e.state">{{ e.text }}</ElTag></template
          >
        </template>
      </ElTableColumn>

      <ElTableColumn label="操作区" fixed="right">
        <template #default="{ row }">
          <template v-if="row.billState === 'toSubmit'">
            <ElButton type="success" @click="open4Modify(row)">修改</ElButton>
            <ElButton type="primary" @click="submit(row)">提交</ElButton>
            <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            icon-color="#626AEF"
            title="是否要删除此条？"
            @confirm="remove(row.leaveBillCode)"
            @cancel="gettable()"
          >
            <template #reference>
              <!-- <el-tooltip content="删除" placement="top"> -->
              <el-button type="danger" 
                >删除</el-button>
              <!-- </el-tooltip> -->
            </template>
          </el-popconfirm>
          </template>
          <template v-if="row.billState === 'toAudit'">
            <ElButton type="success" disabled>修改</ElButton>
            <ElButton type="primary" disabled>提交</ElButton>
            <ElButton type="danger" disabled>删除</ElButton>
          </template>
          <template v-if="row.billState === 'auditted'">
            <ElButton type="success" disabled>修改</ElButton>
            <ElButton type="primary" disabled>提交</ElButton>
            <ElButton type="danger" disabled>删除</ElButton>
          </template>
        </template>
      </ElTableColumn>
    </ElTable>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <LeaveInsert ref="leaveInsert" @post-insert="reset" @rpagenum="rnum"></LeaveInsert>
    <LeaveModify ref="leaveModify" @put-modify="reset" @rpagenum="rnum"></LeaveModify>
    <LeaveSubmit ref="leaveSubimt" @put-submit="reset" @rpagenum="rnum"></LeaveSubmit>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export type LeaveType = 'sick' | 'issue' | 'annual'
export type BillStates = 'toSubmit' | 'toAudit' | 'auditted'
export interface LeaveApplyQueryCondition {
  leaveTypes: Array<LeaveType>
  leaveBillStates: Array<BillStates>
  pageNum: number
  pageSize: number
}
export type LeaveBill = {
  leaveBillCode: string
  leaveType: LeaveType
  timeStart: Date | null
  timeEnd: Date | null
  reason: string | null
  applier: string | null
  applyTime: Date | null
  auditor: string | null
  auditWord: string | null
  auditTime: Date | null
  resentTimes: number
  billState: BillStates
  modifyTime: Date | null
}
export default {
  name: 'LeaveApply',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        leaveTypes: [],
        leaveBillStates: [],
        pageNum: 1,
        pageSize: 3
      } as LeaveApplyQueryCondition,
      results: [] as Array<LeaveBill>,
      total: 0,
      leaveTypes: ['sick', 'issue', 'annual'],
      leaveBillStates: ['toSubmit', 'toAudit', 'auditted'],
      billtypes: [
        { state: 'toSubmit', color: 'primary', text: '待提交' },
        { state: 'toAudit', color: 'danger', text: '待审核' },
        { state: 'auditted', color: 'success', text: '已审核' }
      ],
      ltypes: [
        { states: 'sick', text: '病假' },
        { states: 'issue', text: '事假' },
        { states: 'annual', text: '年假' }
      ],
      removevisible: false
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition()
  },
  methods: {
    // sampleM() {},
    reset() {
      this.queryCondition.leaveBillStates = []
      this.queryCondition.leaveTypes = []
      this.queryByCondition()
    },
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      await axios({
        method: 'POST',
        url: 'http://127.0.0.1:7001/leave/query/applier',
        data: this.queryCondition
      }).then(
        (res) => {
          this.total = res.data.total
          this.results = res.data.results
          console.log(res.data.results)
        },
        (error) => {
          console.log(error.response.data)
        }
      )
      console.log(this.results)
      console.log(this.total)
    },
    open4insert() {
      const leaveInsert: any = this.$refs.leaveInsert
      leaveInsert.show()
    },
    async open4Modify(row: LeaveBill) {
      console.log(row)
      await axios({
        method: 'get',
        url: '/leave/find/' + row.leaveBillCode
      }).then(
        (res) => {
          console.log(res.data)
          const leaveModify: any = this.$refs.leaveModify
          leaveModify.leaveBillDto.leaveType = row.leaveType
          leaveModify.leaveBillDto.timeRange[0] = row.timeStart
          leaveModify.leaveBillDto.timeRange[1] = row.timeEnd
          leaveModify.leaveBillDto.reason = row.reason
          leaveModify.visible = true
          leaveModify.code = row.leaveBillCode
        },
        (error) => {
          ElMessage.warn(error)
        }
      )
    },
    rnum() {
      this.queryCondition.pageNum = 1
    },
    submit(row: LeaveBill) {
      if (row.billState == 'toSubmit') {
        const leaveSubimt: any = this.$refs.leaveSubimt
        leaveSubimt.visible = true
        leaveSubimt.code = row.leaveBillCode
        leaveSubimt.bill = row
      } else {
        ElMessage.warning('必须待提交状态才能提交')
      }
    },
    async remove(code:string) {
      console.log("11111111111111111111111111111")
      console.log(code)

await   axios({
        method: "DELETE",
        url: "http://127.0.0.1:7001/leave/remove/"+code,
      }).then(
        (res) => {
          console.log(res.data);
          this.reset();
          ElMessage.success('删除成功')
        },
        (error) => {
          console.log(error.response.data);
          ElMessage.warning(error.response.data)
        }
      );
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
